<template>
	<view class="map-page pgae">
		<view class="tip">
			<input class="uni-input" v-model="keywords" placeholder="请输入关键字" /><span @click="getMap">搜索</span>
		</view>
		<view class="content-popup" @touchmove.stop.prevent="clear" v-if="detailsShow">
			<view class="popup-top">
				<view class="popup-title">{{pubData.name}}</view>
				<view class="popup-x" @click="detailsClose">×</view>
			</view>
			<view class="popup-top">
				<view class="">类型：{{pubData.typeText}}</view>
			</view>
			<view class="popup-top">
				<view class="" @click="call(pubData.mobile)">联系方式：{{pubData.mobile}}</view>
			</view>
			<view class="popup-top" style="margin-bottom: 30rpx;">
				<view class="">详细地址：{{pubData.address}}</view>
			</view>
		</view>
		<map :longitude="mapConf.longitude" :latitude="mapConf.latitude" :scale="mapConf.scale"
			:markers="mapConf.markers" id="map" @markertap="markertap"></map>
	</view>
</template>

<script>
	import QQMapWX from '@/util/qqmap-wx-jssdk.js'
	import {
		getMap,
		getMapDetail
	} from '@/api/map';
	import {
		downloadFile
	} from '@/api/file';
	import {
		title
	} from 'process';
	export default {
		data() {
			return {
				mapConf: {
					longitude: 98.452225,
					latitude: 39.645297,
					scale: 9,
					markers: [],
				},
				keywords: '',
				pubData: {
					name: '',
					address: '',
					typeText: '',
					mobile: ''
				},
				detailsShow: false,
			}
		},
		methods: {
			getMap() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getMap({
					keywords: this.keywords
				}).then(res => {
					let list = res;
					this.mapConf.markers = []
					list.forEach(async item => {
						let iconResult = await downloadFile(item.icon)
						this.mapConf.markers.push({
							id: item.id,
							latitude: item.latitude,
							longitude: item.longitude,
							title: item.name,
							iconPath: iconResult.tempFilePath,
							width: 30,
							height: 30
						})
					})
				}).catch(() => {
					this.showToast('加载失败', () => {
						uni.navigateBack();
					})
				})
				this.mapCtx = wx.createMapContext('map') //map 组件的 id
				this.mapCtx.addGroundOverlay({
					id: 1,
					src: "https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/suzhouzhongzi/suzhouMap.png", //图层图片路径
					bounds: { //图片覆盖的经纬度范围
						southwest: { //西南角经纬度
							latitude: 39.119246,
							longitude: 98.194266,
						},
						northeast: { //东北角经纬度
							latitude: 40.015517,
							longitude: 99.501767,
						}
					},
					zIndex: 1,
				})
				// this.mapCtx.addGroundOverlay({
				// 	id: 1,
				// 	src: "https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/index/map7.png", //图层图片路径
				// 	bounds: { //图片覆盖的经纬度范围
				// 		southwest: { //西南角经纬度
				// 			latitude: 39.644659,
				// 			longitude: 98.591094,
				// 		},
				// 		northeast: { //东北角经纬度
				// 			latitude: 39.741111,
				// 			longitude: 98.834323,
				// 		}
				// 	},
				// 	zIndex: 1,
				// })
				// this.mapCtx.addGroundOverlay({
				// 	id: 2,
				// 	src: "https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/index/map6.png", //图层图片路径
				// 	bounds: { //图片覆盖的经纬度范围
				// 		southwest: { //西南角经纬度
				// 			latitude: 39.504345,
				// 			longitude: 98.329808,
				// 		},
				// 		northeast: { //东北角经纬度
				// 			latitude: 39.701984,
				// 			longitude: 98.51016,
				// 		}
				// 	},
				// 	zIndex: 1
				// })
			},
			detailsClose() {
				this.detailsShow = false;
			},
			clear(e) {
				e.stopPropagation();
			},
			markertap(e) {
				console.log(e)
				this.detailsShow = true
				let markerId = e.detail.markerId;
				getMapDetail({
					id: markerId
				}).then(res => {
					this.pubData = res
				}).catch(() => {})
			},
		},
		onLoad() {
			this.getMap()
		}
	}
</script>

<style lang="scss" scoped>
	.map-page {
		width: 100vw;
		height: 100vh;

		.tip {
			height: 74rpx;
			width: calc(100% - 40rpx);
			margin: auto;
			border: 1px solid #ccc;
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 6rpx;
			position: fixed;
			top: 20rpx;
			left: 20rpx;
			z-index: 20;

			.uni-input {
				flex: 1;
				height: 100%;
				padding-left: 10rpx;
				font-size: 28rpx;
			}

			span {
				width: 80rpx;
				color: #8b8c8f;
				font-size: 28rpx;
			}
		}

		.content-popup {
			bottom: 0;
			position: fixed;
			left: 0;
			width: 100%;
			z-index: 999999;
			height: 26%;
			background-color: #fff;

			.popup-top {
				padding-top: 30rpx;
				padding-left: 46rpx;
				display: flex;

				.popup-title {
					font-size: 36rpx;
					font-weight: 800;
					width: 85%;
				}

				.popup-x {
					color: #fff;
					width: 50rpx;
					height: 50rpx;
					background-color: #64B548;
					border-radius: 50rpx;
					font-size: 50rpx;
					line-height: 88%;
					/** 垂直居中 **/
					text-align: center;
					/** 水平居中 **/
				}
			}
		}

		map {
			width: 100%;
			height: 100%;
		}
	}
</style>